<template>
    <van-sticky>
        <van-nav-bar title="文章详情" left-arrow @click-left="onClickLeft()">
            <template #right><van-icon name="share" color="#29b3b1" @click="articleShare()" /></template>
        </van-nav-bar>
    </van-sticky>
    <!--这里想办法处理后端传送过来的信息-->
    <div v-if="articleInfo.content" class="article-item">
        <div class="article-title">
            {{ articleInfo.title }}
        </div>
        <div v-for="item in JSON.parse(articleInfo.content)" v-bind:key="item">
            <div v-if="item.type == 'text'" class="article-content">
                {{ "&ensp;&ensp;&ensp;&ensp;" + item.content }}
            </div>
            <div v-else-if="item.type == 'img'">
                <lazy-component>
                    <van-image :src="item.link" width="100%" fit="contain" lazy-load="true"></van-image>
                </lazy-component>
                <!-- <van-image :src="item.link" width="100%" fit="contain" lazy-load="true"></van-image> -->
            </div>
        </div>
    </div>
    <!--加载评论区内容-->
    <div v-if="commentList instanceof Array && commentList.length">
        <div class="comment-box">
            <van-sticky @change="stickyChange">
                <div class="comment-title" :style="{ backgroundColor: isSticky ? '#ffffff' : '' }">
                    <div class="title-tag" style="color:#616161">热门评论</div>
                    <div class="title-tag iconfont iconfont-row" style="color:#bbbbbb" @click="orderSelect()">按热度</div>
                </div>
            </van-sticky>
            <div class="comment-item" v-for="item in commentList" v-bind:key="item.reply_id">
                <!--左部分展示头像-->
                <div class="avatar-height">
                    <van-image :src="item.avatar" width="40px" height="40px" round></van-image>
                </div>
                <!--右部分展示相关信息-->
                <div style="width:100%">
                    <!--展示昵称IP归属等-->
                    <div class="comment-trace">
                        <div class="user-name">{{ item.uname }}</div>
                        <div class="comment-time">
                            <span style="margin-right:4px">{{ item.create_time }}</span>
                            <span>{{ "IP属地：" + (item.area != undefined && item.area != "" ? item.area : "未知") }}</span>
                        </div>
                    </div>
                    <!--展示点赞回复等信息-->
                    <div class="comment-content">
                        {{ item.content }}
                    </div>
                    <div class="comment-handle">
                        <div class="comment-callback">
                            <span class="iconfont iconfont-prize" style="margin-right:16px" @click="prizeComment()"> {{ item.like_count }}</span>
                            <span class="iconfont iconfont-kick" @click="clickComment()"> </span>
                            <span class="iconfont iconfont-comment-share" @click="commentShare()"> </span>
                            <span class="iconfont iconfont-reply" @click="commentReply()"></span>
                        </div>
                        <div class="comment-alert">
                            <span class="iconfont iconfont-alert" @click="commentAlert()"></span>
                        </div>
                    </div>
                    <!--展示回复内容-->
                    <div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--回顶部操作-->
    <van-back-top class="topbar-custom" right="25" bottom="100">
        <van-icon class-prefix="iconfont" size="32px" name="topbar"></van-icon>
    </van-back-top>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from 'vue-router';
import _service from "../request/axios";
import { showToast, showDialog } from "vant";

const router = useRouter();
const commentList = ref("")
const isSticky = ref(false)
const articleInfo = ref("");
let id = router.currentRoute.value.query.id;
function onClickLeft() {
    router.back();
}
function articleShare(){
    showToast("分享功能即将开放哦~");
}
function prizeComment(){
    showToast("精妙的评论等等再赞也不急哟~");
}
function orderSelect() {
    showToast("多种排序方式即将上线~");
}
function clickComment() {
    showToast("快助手，你现在还不能踩它~");
}
function commentReply() {
    showToast("评论回复功能即将开放~");
}
function commentShare() {
    showToast("分享功能暂未开放~");
}
function commentAlert() {
    showDialog({
        title: "感谢信",
        message: "评论反馈功能即将上线，为你净化评论区的责任感点赞(((o(*ﾟ▽ﾟ*)o)))~",
    }).then(() => {
        // on confirm
    }).catch(() => {
        // on cancel
    });
}
function stickyChange() {
    isSticky.value = !isSticky.value;
}
_service.get("/article/detail?id=" + id).then(res => {
    articleInfo.value = res.data;
    // console.log("输出请求结果：", articleInfo.value);
    //接下来请求评论数据
    _service.get("/article/comment?id=" + articleInfo.value.comment_id).then(res2 => {
        commentList.value = res2.data
        console.log("输出评论数据：", commentList.value);
    })
})
</script>
<style lang="less" scoped>
.article-item {
    padding: 0px 10px 10px;

    .article-title {
        font-weight: bold;
        line-height: 20px;
        text-align: left;
        margin-bottom: 10px;
    }

    .article-content {
        text-align: left;
        padding-bottom: 6px;
    }
}

.comment-box {
    padding: 5px 10px;
    padding-bottom: 60px;

    .comment-item {
        display: flex;
    }

    .comment-title {
        display: flex;
        justify-content: space-between;
        height: 40px;
        line-height: 40px
    }

    .iconfont::before {
        padding-right: 4px
    }

    .avatar-height {
        height: 50px;
        display: flex;
        align-items: center;
        padding-right: 20px
    }

    .comment-trace {
        height: 50px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        .user-name {
            color: #fd8fb4;
            font-size: 14px;
            font-weight: bold;
        }

        .comment-time {
            font-size: 12px;
            color: #cacaca;
        }
    }

    .comment-content {
        margin: 10px 0px;
        text-align: left;
    }

    .comment-handle {
        height: 20px;
        width: 100%;
        display: flex;
        color: #aaaaaa;
        justify-content: space-between;

        .iconfont::before {
            margin-right: 12px;
        }

        .iconfont-prize::before {
            margin-right: 2px;
        }

        .comment-callback {
            display: flex;
            font-size: 14px;
            align-items: center;
        }
    }
}
</style>